<template>
  <div>

    <van-sticky>
      <div class="tab-wrapper">
        <van-tabs v-model="activeTab" @click="onClick">
          <!-- 左侧标签 -->
          <van-tab title="动态" nav-left></van-tab>
          <van-tab title="发现" nav-left></van-tab>
        </van-tabs>
        <div class="right-icons" slot="nav-right">
          <!-- 右侧图标 -->
          <van-icon name="contact" class="icon"></van-icon>
          <van-icon name="search" class="icon"></van-icon>
        </div>
      </div>
    </van-sticky>

    <!-- 瀑布流布局 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">


      <div class="waterfall" v-if="activeTab === 1">
        <div class="waterfall-column" :style="{ order: index % 2 === 0 ? '1' : '2' }" v-for="(column, index) in columns"
          :key="index">
          <div @click="$router.push(`/find/dynamic/${item.sid}`)" class="waterfall-item"
            v-for="(item, itemIndex) in items" :key="itemIndex" v-if="itemIndex % columns === index">
            <img :src="item.pic.split(',')[0]" alt="Item Image" />
            <!-- <div class="item-content"> -->
            <p class="content-title">{{ item.title }}</p>
            <div class="user">
              <img :src="item.headpic" alt="" />
              <span>{{ item.uname }}</span>
            </div>

            <!-- </div> -->
          </div>
        </div>
      </div>


      <div v-if="activeTab === 0">
        <div v-if="share">
          <comment-item v-for="(item, i) in share" :key="i" :headpic="item.headpic" :uname="item.uname"
            :title="item.title" :sid="item.sid" :detail="item.detail" :pic="item.pic.split(',')"
            :time="moment(parseInt(item.time)).format('YYYY-MM-DD HH:mm:ss')" @delete="deleteShare(item.sid, $event)">
          </comment-item>
        </div>
        <div v-else>
          <van-sticky>
            <van-empty description="暂未发布内容"></van-empty>
          </van-sticky>
        </div>
      </div>
    </van-pull-refresh>
    <div class="publish" @click="$router.push('/my/photo')">
      <van-icon name="edit" color="#fff" size="23" style="line-height: 40px" />
    </div>
  </div>
</template>

<script>
import { base } from "@/service";
import httpApi from "@/http";
import CommentItem from '@/components/CommentItem.vue';
import moment from 'moment'
import storage from '@/utils/Storage';
import { Toast, Dialog } from "vant";



export default {
  components: { CommentItem },
  data() {
    return {
      activeTab: 1, // 当前选中的标签索引
      items: [],
      columns: 2, // 瀑布流的列数
      base,
      share: [],
      moment,
      isLoading: false,
    };
  },
  mounted() {
    this.onShare();
    this.shareMy()
  },
  methods: {
    deleteShare(sid) {
      Dialog.confirm({
        message: '确定删除?',
      })
        .then(() => {
          httpApi.shareApi.shareDelete({ sid: sid }).then(res => {
            console.log(res);
            if (res.data.code == 200) {
              Toast('删除成功')
              this.show = false
              this.onShare();
              this.shareMy()
            } else {
              Toast('删除失败')
            }
          })
        })
        .catch(() => {
          // on cancel
        });
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.shareMy()
        this.onShare();
      }, 1000);
    },

    onClick(index) {
      // 处理标签页的点击事件
      this.activeTab = index;
    },
    onShare() {
      httpApi.shareApi.shareType().then((res) => {
        console.log(res);
        if (res.data.data) {
          this.items = res.data.data.reverse()
        }
        this.items = res.data.data;
      });
    },
    shareMy() {
      httpApi.shareApi.shareByUid({ uid: storage.get(storage.KEY_USER).uid }).then(res => {
        console.log('我的分享', res);
        if (res.data.code == 200) {
          this.share = res.data.data.reverse()
        }else{
          this.share=''
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.tab-wrapper {
  display: flex;
  align-items: center;
  background-color: #fff;
}

::v-deep .van-tabs .van-tab {
  padding: 4px 15px;
}

.right-icons {
  display: flex;
  margin-left: auto;

  .icon {
    font-size: 24px;
    color: #333;
    margin-left: 10px;
  }
}

/* 瀑布流样式 */
.waterfall {
  display: flex;
  justify-content: space-around;
  background-color: #eee;
  padding: 1vw;
}

.waterfall-column {
  width: calc(50% - 10px);
  /* 每一列的宽度为50%，减去间距 */
}

.waterfall-item {
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: #fff;

  img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 8px;
  }

  p {
    padding: 1vh;
    font-size: 14px;
  }

  .user {
    padding: 1vh;
    display: flex;
    align-items: center;

    img {
      width: 20px;
      border-radius: 50%;
      margin-right: 5px;
    }

    span {
      font-size: 12px;
    }
  }

  .item-content {
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 8px;

    .content-title {
      font-size: 15px;
    }

    .description {
      /* 添加以下样式 */
      margin-top: 5px;
      font-size: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
    }
  }
}

.publish {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: fixed;
  bottom: 70px;
  right: 10px;
  text-align: center;
  background-color: #24c68b;
}
</style>
